<!-- 首页 -->
<template>
  <!-- 首页轮播图 -->
  <van-swipe class="swiper-carousel" lazy-render :autoplay="3000" :show-indicators="false">
    <van-swipe-item v-for="(image, index) in homeImgs" :key="index">
      <img class="lazy-img" :src="image.imgUrl" />
    </van-swipe-item>
  </van-swipe>
    
</template>

<script setup lang="ts">
import { reactive } from 'vue';

// 轮播图数据
const homeImgs = reactive([
  { id: 1, imgUrl: 'src/assets/home/home1.jpg'},
  { id: 2, imgUrl: 'src/assets/home/home2.jpg'},
  { id: 3, imgUrl: 'src/assets/home/home3.jpg'},
]);
</script>


<style>
  .swiper-carousel {
    padding-bottom: 10px;
  }

  .lazy-img {
    width: 100%;
    height: 250px;
  }
</style>